<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>万户公司常用组件库</title>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/css_whir.css">
    <link rel="stylesheet" href="../css/wh_component.css">
    <!-- js -->
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/whirCommon.js"></script>
</head>
<body>
    
    <!-- Blog type 01 -->
    <div class="blog-content-01">
        <div class="w1600">
            <div class="flex-list d-flex">
                <!-- 01 -->
                <div class="single-item">
                    <div class="single-box">
                        <figure class="pr scale-hover after" data-after="height: 300px">
                            <a href=""><img src="../image/mask.jpg" class="w100 image" alt=""></a>
                        </figure>
                        <div class="infomation">
                            <h2>CATEGORY</h2>
                            <h3 class="dot"><a href="">The Catalyzer</a></h3>
                            <div class="description line-sm">
                                Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.
                            </div>
                            <div class="bottom-action d-flex a-center j-sb">
                                <div class="blog-01-more">
                                    <a class="d-flex a-center" href="">Learn More<img src="../image/arrow_right_active.svg" alt=""><img src="../image/arrow_right_white.svg" class="hidden" alt=""></a>
                                </div>
                                <div class="other-info">
                                    <span class="icon view">1.2K</span>
                                    <span class="icon comment">6</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 02 -->
                <div class="single-item">
                    <div class="single-box">
                        <figure class="pr scale-hover after" data-after="height: 300px">
                            <a href=""><img src="../image/mask.jpg" class="w100 image" alt=""></a>
                        </figure>
                        <div class="infomation">
                            <h2>CATEGORY</h2>
                            <h3 class="dot"><a href="">The 400 Blows</a></h3>
                            <div class="description line-sm">
                                Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.
                            </div>
                            <div class="bottom-action d-flex a-center j-sb">
                                <div class="blog-01-more">
                                    <a class="d-flex a-center" href="">Learn More<img src="../image/arrow_right_active.svg" alt=""><img src="../image/arrow_right_white.svg" class="hidden" alt=""></a>
                                </div>
                                <div class="other-info">
                                    <span class="icon view">1.2K</span>
                                    <span class="icon comment">6</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 03 -->
                <div class="single-item">
                    <div class="single-box">
                        <figure class="pr scale-hover after" data-after="height: 300px">
                            <a href=""><img src="../image/mask.jpg" class="w100 image" alt=""></a>
                        </figure>
                        <div class="infomation">
                            <h2>CATEGORY</h2>
                            <h3 class="dot"><a href="">Shooting Stars</a></h3>
                            <div class="description line-sm">
                                Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.
                            </div>
                            <div class="bottom-action d-flex a-center j-sb">
                                <div class="blog-01-more">
                                    <a class="d-flex a-center" href="">Learn More<img src="../image/arrow_right_active.svg" alt=""><img src="../image/arrow_right_white.svg" class="hidden" alt=""></a>
                                </div>
                                <div class="other-info">
                                    <span class="icon view">1.2K</span>
                                    <span class="icon comment">6</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 04 -->
                <div class="single-item">
                    <div class="single-box">
                        <figure class="pr scale-hover after" data-after="height: 300px">
                            <a href=""><img src="../image/mask.jpg" class="w100 image" alt=""></a>
                        </figure>
                        <div class="infomation">
                            <h2>CATEGORY</h2>
                            <h3 class="dot"><a href="">The Catalyzer</a></h3>
                            <div class="description line-sm">
                                Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.
                            </div>
                            <div class="bottom-action d-flex a-center j-sb">
                                <div class="blog-01-more">
                                    <a class="d-flex a-center" href="">Learn More<img src="../image/arrow_right_active.svg" alt=""><img src="../image/arrow_right_white.svg" class="hidden" alt=""></a>
                                </div>
                                <div class="other-info">
                                    <span class="icon view">1.2K</span>
                                    <span class="icon comment">6</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 05 -->
                <div class="single-item">
                    <div class="single-box">
                        <figure class="pr scale-hover after" data-after="height: 300px">
                            <a href=""><img src="../image/mask.jpg" class="w100 image" alt=""></a>
                        </figure>
                        <div class="infomation">
                            <h2>CATEGORY</h2>
                            <h3 class="dot"><a href="">The 400 Blows</a></h3>
                            <div class="description line-sm">
                                Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.
                            </div>
                            <div class="bottom-action d-flex a-center j-sb">
                                <div class="blog-01-more">
                                    <a class="d-flex a-center" href="">Learn More<img src="../image/arrow_right_active.svg" alt=""><img src="../image/arrow_right_white.svg" class="hidden" alt=""></a>
                                </div>
                                <div class="other-info">
                                    <span class="icon view">1.2K</span>
                                    <span class="icon comment">6</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 06 -->
                <div class="single-item">
                    <div class="single-box">
                        <figure class="pr scale-hover after" data-after="height: 300px">
                            <a href=""><img src="../image/mask.jpg" class="w100 image" alt=""></a>
                        </figure>
                        <div class="infomation">
                            <h2>CATEGORY</h2>
                            <h3 class="dot"><a href="">Shooting Stars</a></h3>
                            <div class="description line-sm">
                                Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.
                            </div>
                            <div class="bottom-action d-flex a-center j-sb">
                                <div class="blog-01-more">
                                    <a class="d-flex a-center" href="">Learn More<img src="../image/arrow_right_active.svg" alt=""><img src="../image/arrow_right_white.svg" class="hidden" alt=""></a>
                                </div>
                                <div class="other-info">
                                    <span class="icon view">1.2K</span>
                                    <span class="icon comment">6</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Blog type 01 end -->

    <!-- 查看源码 -->
    <div class="w1600">
         <!-- 源码 -->
        <p class="h" data-height=".5"></p>
        <button type="button" 
        data-toggle="collapse" 
        data-target="#collapseExample" 
        aria-expanded="false" 
        aria-controls="collapseExample" 
        class="btn btn-outline-info">查看源码</button>
        <p class="h" data-height=".2"></p>
        <!-- 源码 -->
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
                <kbd class="font20 t-center">Html</kbd>
                <p class="h" data-height=".2"></p>
                <p class="t-center">
                    <strong>只放一个卡片</strong>  
                    <pre><code>
                        &lt;!-- Blog type 01 --&gt;
                        &lt;div class=&quot;blog-content-01&quot;&gt;
                            &lt;div class=&quot;w1600&quot;&gt;
                                &lt;div class=&quot;flex-list d-flex&quot;&gt;
                                    &lt;!-- 01 --&gt;
                                    &lt;div class=&quot;single-item&quot;&gt;
                                        &lt;div class=&quot;single-box&quot;&gt;
                                            &lt;figure class=&quot;pr scale-hover after&quot; data-after=&quot;height: 300px&quot;&gt;
                                                &lt;a href=&quot;&quot;&gt;&lt;img src=&quot;../image/mask.jpg&quot; class=&quot;w100 image&quot; alt=&quot;&quot;&gt;&lt;/a&gt;
                                            &lt;/figure&gt;
                                            &lt;div class=&quot;infomation&quot;&gt;
                                                &lt;h2&gt;CATEGORY&lt;/h2&gt;
                                                &lt;h3 class=&quot;dot&quot;&gt;&lt;a href=&quot;&quot;&gt;The Catalyzer&lt;/a&gt;&lt;/h3&gt;
                                                &lt;div class=&quot;description line-sm&quot;&gt;
                                                    Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.
                                                &lt;/div&gt;
                                                &lt;div class=&quot;bottom-action d-flex a-center j-sb&quot;&gt;
                                                    &lt;div class=&quot;blog-01-more&quot;&gt;
                                                        &lt;a class=&quot;d-flex a-center&quot; href=&quot;&quot;&gt;Learn More
                                                        &lt;img src=&quot;../image/arrow_right_active.svg&quot; alt=&quot;&quot;&gt;
                                                        &lt;img src=&quot;../image/arrow_right_white.svg&quot; class=&quot;hidden&quot; alt=&quot;&quot;&gt;
                                                        &lt;/a&gt;
                                                    &lt;/div&gt;
                                                    &lt;div class=&quot;other-info&quot;&gt;
                                                        &lt;span class=&quot;icon view&quot;&gt;1.2K&lt;/span&gt;
                                                        &lt;span class=&quot;icon comment&quot;&gt;6&lt;/span&gt;
                                                    &lt;/div&gt;
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;!-- Blog type 01 end --&gt;
                    </code></pre>
                </p>
                <p class="h" data-height=".3"></p>
                <kbd class="font20 t-center">Css</kbd>
                <p class="h" data-height=".2"></p>
                <p>
                    <pre><code>
                        /* one */

                        .blog-content-01 .infomation{
                            padding: .3rem;
                        }
                        .blog-content-01 .flex-list{
                            margin: 0 -.15rem;
                        }
                        .blog-content-01 .single-item{
                            width: 33.33%;
                            padding: 0 .15rem;
                        }
                        .blog-content-01 .single-item:nth-of-type(3n) ~ .single-item{
                            margin-top: .3rem;
                        }
                        .blog-content-01 .single-box{
                            border: solid 1px #e5e7eb;
                            border-radius: .1rem;
                            overflow: hidden;
                        }
                        .blog-content-01 .single-box figure img{
                            height: 3rem;
                            object-fit: cover;
                        }
                        .blog-content-01 .single-box .infomation h2{
                            font-size: .14rem;
                            color: #9ca3af;
                            margin-bottom: .1rem;
                        }
                        .blog-content-01 .single-box .infomation h3{
                            font-size: .2rem;
                        }
                        .blog-content-01 .single-box .description{
                            margin: .15rem 0 .2rem;
                            opacity: .8;
                        }
                        .blog-content-01 .single-box .blog-01-more a{
                            transition: all .5s ease;
                            color: #0281cc;
                            padding: .1rem .15rem;
                            margin-left: -.15rem;
                            border-radius: .05rem;
                        }
                        .blog-content-01 .single-box .blog-01-more img{
                            width: .18rem;
                            margin-left: .1rem;
                        }
                        .blog-content-01 .single-box  .other-info .icon{
                            padding-left: .25rem;
                            color: #999;
                            line-height: .25rem;
                            background-position: 0 center;
                            background-repeat: no-repeat;
                            background-size: .25rem;
                        }
                        .blog-content-01 .single-box  .other-info .icon:not(:last-child) {
                            border-right: solid 1px #e5e7eb;
                            margin-right: .1rem;
                            padding-right: .1rem;
                        }
                        .blog-content-01 .single-box  .other-info .view{
                            background-image: url(../image/view.svg);
                        }
                        .blog-content-01 .single-box  .other-info .comment{
                            background-image: url(../image/comment.svg);
                        }
                        
                        @media(min-width: 1201px) {
                            .blog-content-01 .single-box .blog-01-more:hover a{
                                margin-left: 0;
                                background: #0281cc;
                                color: #fff;
                            }
                            .blog-content-01 .single-box .blog-01-more:hover img{
                                display: none;
                            }
                            .blog-content-01 .single-box .blog-01-more:hover img.hidden{
                                display: block;
                            }
                        }
                        
                        @media (max-width: 1024px) {
                            .blog-content-01 .single-item{
                                width: 50%;
                            }
                            .blog-content-01 .single-item:nth-of-type(2n) ~ .single-item{
                                margin-top: .3rem;
                            }
                        }
                        
                        @media (max-width: 640px) {
                            .blog-content-01 .single-item{
                                width: 100%;
                            }
                            .blog-content-01 .single-item:not(:first-child){
                                margin-top: .3rem;
                            }
                        }

                        /* one end */
                    </code></pre>
                </p>
            </div>
          </div>
          <p class="h" data-height=".5"></p>
        <!-- 组件公共 Class -->
          <button type="button" 
          data-toggle="collapse" 
          data-target="#collapsePublic" 
          aria-expanded="false" 
          aria-controls="collapsePublic" 
          class="btn btn-outline-info">组件公共 Class</button>
          
        <div class="collapse" id="collapsePublic">
            <div class="card card-body">
                <kbd class="font20 t-center">Css</kbd>
                <p class="h" data-height=".2"></p>
                <p>
                    <pre><code>
                        /* 组件公共 class */
                        .pr{position: relative;z-index: 5;}
                        .ab{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 2;}
                        .w100{width: 100%;}
                        .hidden,.hide {
                            display: none;
                        }

                        .d-flex {
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -ms-flex-wrap: wrap;
                            flex-wrap: wrap;
                        }
                        .f-reverse{
                            flex-direction: row-reverse;
                        }
                        .j-end {
                            -webkit-box-pack: end;
                            -ms-flex-pack: end;
                            justify-content: flex-end;
                        }

                        .j-center {
                            -webkit-box-pack: center;
                            -ms-flex-pack: center;
                            justify-content: center;
                        }

                        .j-sb {
                            -webkit-box-pack: justify;
                            -ms-flex-pack: justify;
                            justify-content: space-between;
                        }

                        .j-start {
                            -webkit-box-pack: start;
                            -ms-flex-pack: start;
                            justify-content: flex-start;
                        }

                        .f-wrap {
                            -ms-flex-wrap: wrap;
                            flex-wrap: wrap;
                        }

                        .f-colu {
                            -webkit-box-orient: vertical;
                            -webkit-box-direction: normal;
                            -ms-flex-direction: column;
                            flex-direction: column;
                        }

                        .a-center {
                            -webkit-box-align: center;
                            -ms-flex-align: center;
                            align-items: center;
                        }

                        .a-start {
                            -webkit-box-align: start;
                            -ms-flex-align: start;
                            align-items: flex-start;
                        }

                        .a-end {
                            -webkit-box-align: end;
                            -ms-flex-align: end;
                            align-items: flex-end;
                        }

                        .a-baseline {
                            -webkit-box-align: baseline;
                            -ms-flex-align: baseline;
                            align-items: baseline;
                        }
                        .t-center{text-align: center;}

                        /* 行高 */
                        .line-mn,
                        .line-mn * {
                            line-height: 1.3;
                        }

                        .line-sm,
                        .line-sm * {
                            line-height: 1.5;
                        }

                        .line-md,
                        .line-md * {
                            line-height: 1.8;
                        }

                        .line-lg,
                        .line-lg * {
                            line-height: 2;
                        }

                        /* 字体 */
                        .font-heavy {font-weight: 900;}
                        .font-bold {font-weight: 700;}
                        .font12 {font-size: 0.12rem;}
                        .font14 {font-size: 0.14rem;}
                        .font16 {font-size: .16rem;}
                        .font18 {font-size: .18rem;}
                        .font20 {font-size: .20rem;}
                        .font22 {font-size: .22rem;}
                        .font24 {font-size: .24rem;}
                        .font25 {font-size: .25rem;}
                        .font26 {font-size: .26rem;}
                        .font28 {font-size: .28rem;}
                        .font30 {font-size: .30rem;}
                        .font32 {font-size: .32rem;}
                        .font34 {font-size: .34rem;}
                        .font35 {font-size: .35rem;}
                        .font36 {font-size: .36rem;}
                        .font38 {font-size: .38rem;}
                        .font40 {font-size: .40rem;}
                        .font42 {font-size: .42rem;}
                        .font45 {font-size: .45rem;}
                        .font48 {font-size: .48rem;}
                        .font50 {font-size: .50rem;}
                        .font55 {font-size: .55rem;}
                        .font56 {font-size: .56rem;}
                        .font58 {font-size: .58rem;}
                        .font60 {font-size: .6rem;}
                        .font65 {font-size: .65rem;}
                        .font100 {font-size: 1rem;}
                        /* 图片移入放大 */
                        .scale-hover{overflow: hidden;}
                        @media(min-width: 1201px) {
                            .scale-hover .image{
                                transition: all .5s;
                            }
                            .scale-hover:hover .image{
                                transform: scale(1.03);
                            }
                        }
                    </code></pre>
                </p>
            </div>
          </div>
        <p class="h" data-height="1.5"></p>
    </div>
    
    
    <script>
        whirMain.bottom()
    </script>
</body>
</html>